<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">

      <!--列表-->
      <el-table :data="DNames" highlight-current-row v-loading="loading" style="width: 100%;">
        <el-table-column type="index" width="60"></el-table-column>
        <el-table-column prop="name" label="名称" sortable></el-table-column>
        <el-table-column prop="id" label="序列号" sortable></el-table-column>
        <el-table-column prop="count" label="数量" sortable></el-table-column>
        <!--<el-table-column label="操作">-->
          <!--<template scope="scope">-->
            <!--<el-button-->
              <!--size="small"-->
              <!--@click="handleEdit(scope.row)">编辑</el-button>-->
            <!--<el-button-->
              <!--size="small"-->
              <!--type="danger"-->
              <!--@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="age" label="name数量" width="100" sortable>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
  import headTop from './head.vue'
  import { DeviceStock } from '@/api/api'
  export default {
    data () {
      return {
        loading: false,
        DNames: [
        ]
      }
    },
    components: {
      headTop
    },
    created () {
      this.initData()
    },
    methods: {
      // 获取设备名称
      async initData () {
        this.loading = true
        try {
          DeviceStock().then((res) => {
            this.DNames = res.data  // type 看下转换下，通过store获取
            this.loading = false
          })
        } catch (err) {
          console.log('获取数据失败', err)
        }
      }
    }
  }

</script>

<style scoped>
  .el-button {
    margin: 5px;
  }
</style>
